<template>
	<view class="page-body ">
		<view class="banner">
			<view class="banner-body">
				<view class="p">账户余额</view>
				<view class="h2">{{lendAsset | tofixed}}</view>
			</view>
		</view>
		<view class="bank-cont paround40 mt20">
			<view class="text">您的民富银行二类银行卡:</view>
			<view class="text flex border">
				<view class="key">银行卡号:</view>
				<view class="value">{{bank_account}}</view>
				<view class="copy" @click="setClipboardData">复制</view>
			</view>
			<view class="p">
				充值说明：转账至您已开通的二类银行账户中，转账金额即为充值余额。
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default{
		data(){
			return{
				sum:"",
				isNextStep:false,
				isGetCode:false,
				balance:"1000.00",
				cdNum:"获取验证码",
				isDisabledCode:false,
				isPopout:false,
				textcode:"",
				lendAsset:"",
				bank_account:""
			}
		},
		computed:{
			
		},
		methods:{
			nextStep(e){
				uni.navigateTo({
					url:"/pages/user/withdraw/withdrawsuccess"
				})
			},
			bindChange(e){
				let value=e.detail.value;
				let balance=parseInt(this.balance);
				if(parseInt(value)>balance||value==""||this.textcode==""){
					this.isNextStep=false
				}else{
					this.isNextStep=true;
				}
			},
			bindCode(e){
				let value=e.detail.value
				let balance=parseInt(this.balance);
				if(parseInt(this.sum)>balance||this.sum==""||value==""){
					this.isNextStep=false
				}else{
					this.isNextStep=true;
				}
			},
			resendCode(){
				countBackwards()
			},
			close(){
				this.isPopout=false
			},
			setClipboardData(){
				let bank_account = this.bank_account;
				uni.setClipboardData({
				    data: bank_account,
				    success: function () {
				        that.$showToast('复制成功')
				    }
				});
			}
		},
		onLoad(options){
			that=this;
			this.lendAsset = options.lendAsset;
			this.bank_account = options.bank_account
		},
		onShow(options){
			
		},
		onNavigationBarButtonTap(e){
			this.isPopout=true
		},
		onUnload(){
			clearInterval(clock);
		},
		filters:{
			tofixed(value){
				return parseFloat(value).toFixed(2)
			}
		}
	}
	// 1分钟倒计时
	var clock;
	function countBackwards() {
	    let nums = 59;
	    let isDisabled = true;
	    let vertifyCode = nums + 's';
	    that.cdNum=vertifyCode;
		that.isDisabledCode=isDisabled;
	    clock = setInterval(function () {
	        nums--;
			// console.log(nums)
	        if (nums > 0) {
	            vertifyCode = nums + 's';
	        } else {
	            clearInterval(clock);
	            isDisabled = false;
	            vertifyCode = '重发验证码';
	            nums = '59'
	        }
	        that.cdNum=vertifyCode;
			that.isDisabledCode=isDisabled
	        // console.log(nums)
	    }, 1000)
	}
</script>

<style lang="scss" scoped="">
	.page-body{background: #f7f6f8;}
	.floor1{
		justify-content: space-between; height: 130upx; margin-bottom: 20upx; background: #fff; color: #0e1327;
		.bankcard{
			image{width:50upx;height:50upx ;margin-right: 15upx;}
		}
	}
	.p-w{color: #333;font-size: 24upx;line-height: 60upx;}

	.bank-cont{
		background: #fff; margin-bottom: 20upx;
		.text{height: 88upx;line-height: 88upx;color: #535970; position:relative;
			.key{padding-right: 30upx;font-size: 34upx; color:#0e1327;}
			.value{font-size: 30upx;color:#0e1327;}
			.copy{position: absolute;right: 0;top: 0;color: #ccc;padding: 0 10upx;}
		}
		.login-ipt-wrap{border-bottom-color:$cut-line-color ;}
		.login-ipt-wrap text{color:#0e1327;font-size: 42upx;}
		.p{line-height: 40upx;color: #c3c5d1;padding: 10upx 0 20upx;}
		.border{border-bottom:1px solid #f3f3f3 ;}
	}
	.button{border-radius: 44upx;margin-top: 80upx;}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 34upx;text-align: center;font-weight: bold;}
		.p{font-size: 26upx;color: #535970;line-height: 40upx;padding-top: 10upx;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; font-size: 28upx;}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
	.banner{
		background: #fff;padding:10upx 20upx 10upx; text-align: center; 
		.banner-body{	width: 670upx;height: 180upx;background:linear-gradient( 45deg, rgb(255,98,0) 1%, rgb(255,114,15) 55%, rgb(255,146,44) 100%); border-radius: 10upx 10upx 0 0; color: #fff;margin: 0 auto;padding-top:40upx ;}
		.h2{font-size: 60upx;}
		.p{font-size: 24upx;opacity: .7;line-height: 60upx;}
	}
</style>
